<template>
	<view class="top-black">
		<!-- <view class="tab-bar-pla">
			<status-bar ></status-bar>
		</view> -->

		<view class="tab-bar">
			<view class="bg" :style="{'background':bgColor,'opacity':bgOpacity}" v-if="bgColor"></view>
			<view class="bg" :style="{'opacity':bgOpacity}" v-else></view>
			<!--状态栏高度-->
			<status-bar></status-bar>
		</view>
	</view>
</template>

<script>
	export default {
		name: "top-bar",
		props: {

			bgColor: {
				type: String,
				default: ''
			},
			bgOpacity: {
				type: [String, Number],
				default: 1
			},
		},
		data() {
			return {}
		},

		computed: {
			tovmin() {
				return function(rpx) {
					return rpx * 100 / 750 + 'vmin'
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	//css函数 声明函数
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}

	.tab-bar {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		z-index: 99;
		padding: 0 tovmin(20);

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;

		}
	}

	.tab-bar-pla {
		display: flex;
		flex-direction: column;
		width: 750rpx;
	}
</style>